<template>
  <div class="form-ctx">
    <el-row type="flex" justify="center">
      <el-col :lg="10" :md="12" :sm="16" :xs="24">
        <div class="header">
          <h2 class="text-center">每日健康情况打卡</h2>
          <span>为确保大家的身体健康，减少病毒传染，请大家如实填写。</span>
        </div>
        <el-form :model="question" :rules="rules" ref="quesForm">
          <el-form-item prop="name">
            <span class="item-title must">
              (1) 您的姓名？
            </span>
            <div class="item-body">
              <el-input v-model="question.name" placeholder="填写姓名" size="medium" maxlength="5"></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="number">
            <span class="item-title must">
              (2) 您的学号（工号）？
            </span>
            <div class="item-body">
              <el-input v-model="question.number" placeholder="填写学号（工号）" size="medium" maxlength="12"></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="isWuhan">
            <span class="item-title must">
              (3) 目前所在地？
            </span>
            <div class="item-body">
              <el-radio-group v-model="question.isWuhan">
                <el-radio :label="1">武汉</el-radio>
                <el-radio :label="0">非武汉</el-radio>
              </el-radio-group>
            </div>
            <div class="item-body" v-show="question.isWuhan == 0">
              <el-input class="loc-input" v-model="question.province"
                        size="medium" placeholder="所在省"></el-input>
              <el-input class="loc-input" v-model="question.city"
                        size="medium" placeholder="所在市"></el-input>
              <el-input class="loc-input" v-model="question.county"
                        size="medium" placeholder="所在县"></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="inDorm">
            <span class="item-title must">
              (4) 是否在校居住？
            </span>
            <div class="item-body">
              <el-radio-group v-model="question.inDorm">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item prop="workInSchool">
            <span class="item-title must">
              (5) 是否在校上班？
            </span>
            <div class="item-body">
              <el-radio-group v-model="question.workInSchool">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item prop="hasWuhan">
            <span class="item-title must">
              (6) 你是否去过武汉或接触过武汉人？
            </span>
            <div class="item-body">
              <el-radio-group v-model="question.hasWuhan">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <div class="two-item" v-show="question.hasWuhan">
            <el-form-item>
            <span class="item-title must">
              1) 武汉相关问题
            </span>
              <div class="item-body">
                <el-checkbox-group class="vertical-box" v-model="question.ques">
                  <el-checkbox v-for="(opt, i) in quesOptions" :key="i"
                               :label="opt.value" :disabled="opt.disable">{{opt.label}}
                  </el-checkbox>
                </el-checkbox-group>
                <div v-show="hasQuesOther">
                  <el-input v-model="question.quesOther" placeholder="其他相关情况"
                            type="textarea" rows="2" size="medium" :autosize="{ minRows: 2 }"></el-input>
                </div>
              </div>
            </el-form-item>
            <!--<el-form-item>
            <span class="item-title must">
              2) 疫情相关处理
            </span>
              <div class="item-body">
                <el-checkbox-group class="vertical-box" v-model="question.deals">
                  <el-checkbox v-for="(opt, i) in dealsOptions" :key="i"
                               :label="opt.value" :disabled="opt.disable">{{opt.label}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>-->
          </div>

          <el-form-item prop="hasOut">
          <span class="item-title must">
            (7) 是否外出聚会？
          </span>
            <div class="item-body">
              <el-radio-group v-model="question.hasOut">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item prop="body">
          <span class="item-title must">
            (8) 您的身体状况？
          </span>
            <div class="item-body">
              <el-checkbox-group class="vertical-box" v-model="question.body">
                <el-checkbox v-for="(opt, i) in bodyOptions" :key="i"
                             :label="opt.value" :disabled="opt.disable">{{opt.label}}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item prop="hasRound">
          <span class="item-title must">
            (9) 家人及周围人是否有发热、咳嗽、乏力等症状？
          </span>
            <div class="item-body">
              <el-radio-group v-model="question.hasRound">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item prop="hasBlock">
          <span class="item-title must">
            (10) 是否已封路？
          </span>
            <div class="item-body">
              <el-radio-group v-model="question.hasBlock">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item>
            <span class="item-title">
              (11) 特殊备注
            </span>
            <div class="item-body">
              <el-input type="textarea" rows="3"
                        :autosize="{ minRows: 3 }"
                        v-model="question.otherNote"></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="item-body">
              <el-button type="primary" @click="doSubmit" class="submit-btn">提交</el-button>
            </div>
          </el-form-item>
        </el-form>

        <el-dialog width="80%" top="20vh"
            title="填写电话" :close-on-click-modal="false"
            :visible.sync="writeTelDialog" custom-class="dialog-tel">
          <el-input @focus="telErr = false" :class="telErr ? 'tel-err':''"
                    v-model="question.tel" placeholder="输入你的电话" maxlength="11"></el-input>
          <el-button type="primary" size="medium" @click="doSetTel" class="submit-btn">确定</el-button>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {bodyOptions, quesOptions, dealsOptions} from '../assets/js/QueOptions'

  function isBlank(val) {
    return val == null || val.trim().length == 0
  }

  export default {
    name: "NvForm",
    data() {
      let locationValid = (rule, value, callback) => {
        if (value == 0) {
          if (isBlank(this.question.province) || isBlank(this.question.city) || isBlank(this.question.county)) {
            callback(new Error("地区需要填写完全！"))
          } else {
            callback()
          }
        } else {
          this.question.province = "湖北省"
          this.question.city = "武汉市"
          this.question.county = "武汉市"
          callback()
        }
      }
      let hasWuhanValid = (rule, value, callback) => {
        if (value == 0) {
          callback()
        } else {
          if (this.question.ques == null || this.question.ques.length == 0) {
            callback(new Error("武汉相关问题必填！"))
          } else {
            callback()
          }
        }
      }
      return {
        question: {
          isWuhan: null,
          hasWuhan: null,
          body: [],
          ques: [],
          quesOther: null,
          province: null,
          city: null,
          county: null,
          tel: null
        },
        bodyOptions: Object.assign(bodyOptions),
        quesOptions: Object.assign(quesOptions),
        rules: {
          name: [{required: true, message: '输入姓名', trigger: 'blur'}],
          number: [{required: true, message: '输入学号(工号)', trigger: 'blur'}],
          isWuhan: [
            {required: true, message: '必须填写地区', trigger: 'blur'},
            {validator: locationValid, trigger: 'blur'}
          ],
          hasWuhan: [
            {required: true, message: '必须选择', trigger: 'blur'},
            {validator: hasWuhanValid, trigger: 'blur'}
          ],
          hasOut: [{required: true, message: '必填外出情况', trigger: 'blur'}],
          body: [{required: true, message: '身体情况必填', trigger: 'blur'}],
          hasRound: [{required: true, message: '必填', trigger: 'blur'}],
          hasBlock: [{required: true, message: '必填', trigger: 'blur'}]
        },
        writeTelDialog: false,
        telErr: false
      }
    },
    computed: {
      hasQuesOther() {
        return this.question.ques.indexOf(23) != -1
      }
    },
    watch: {
      'question.body'(nv, ov) {
        this.$utils.checkOpts(nv, 10, this.question['body'], this.bodyOptions)
      },
      'question.hasWuhan'(nv) {
        if (!nv) {
          this.question.deals = []
          this.question.ques = []
          this.question.quesOther = null
        }
      },
      'question.isWuhan'(nv) {
        if (nv) {
          this.question.province = this.question.city
              = this.question.county = null
        }
      }
    },
    methods: {
      doSetTel () {
        let tel = this.question.tel
        if (!isBlank(tel)) {
          if (!/^1[3456789]\d{9}$/.test(tel)) {
            this.telErr = true
          } else {
            this.telErr = false
            this.doSubmit()
          }
        }
      },
      doSubmit() {
        this.$refs['quesForm'].validate(valid => {
          if (valid) {
            let ques = this._buildOpts(this.question.ques, quesOptions),
                body = this._buildOpts(this.question.body, bodyOptions)
            this.$axios.post("/question", Object.assign({}, this.question, {ques, body})).then(rs => {
              if (rs.data.success) {
                this.$message.success("提交成功，感谢填写！")
                this.question = {body: [], ques: []}
                this.writeTelDialog = false
              }
            }).catch(err => {
              if (err.code == 1005) {
                this.writeTelDialog = true
              } else {
                this.$message.error(err.msg)
              }
            })
          } else {
            this.$message.error("信息填写不完整！")
          }
        })
      },
      _buildOpts(arr, opts) {
        let tge = []
        opts.forEach((v, k) => {
          let val = v.value
          if (arr.indexOf(val) != -1) {
            tge.push(Object.assign(v))
          }
        })
        return tge
      },
    },
  }
</script>

<style>
  .form-ctx .el-form-item {
    margin-bottom: 6px;
  }

  .form-ctx .el-form-item .el-form-item__error {
    top: 50px;
    right: 30px;
    left: unset;
  }

  .form-ctx .vertical-box .el-checkbox {
    display: block;
  }

  .loc-input {
    width: 95px;
  }

  .loc-input:not(:last-child) {
    margin-right: 8px;
  }

  .loc-input input {
    padding: 0 8px;
  }

  .dialog-tel .el-dialog__body {
    padding: 10px 20px;
  }

  .dialog-tel {
    max-width: 380px;
  }

  .tel-err input {
    border-color: #F56C6C;
  }

  .tel-err::after {
    content: '格式有误';
    color: #F56C6C;
    font-size: 14px;
    position: absolute;
    top: 10px;
    right: 10px;

  }
</style>

<style scoped>
  .form-ctx {
    padding: 20px 8px 30px;
    background-color: #fefefe;
  }

  .header h2 {
    margin-bottom: 10px;
  }

  .header span {
    display: inline-block;
    font-size: 13px;
    color: #9b9b9b;
    padding-left: 5px;
    margin-bottom: 10px;
  }

  .text-center {
    text-align: center;
  }

  .item-title {
    display: inline-block;
    font-size: 15px;
  }

  .item-title.must:after {
    content: '*';
    color: red;
  }

  .item-body {
    margin-left: 24px;
    margin-right: 20px;
  }

  .two-item {
    margin-left: 60px;
  }

  .submit-btn {
    width: 100px;
    margin-top: 10px;
  }
</style>